function swiper(selector,imgList){
    var swiperDiv = document.querySelector(selector);

    function createSwiperHtml(imgList){
        var imgListDiv = document.createElement("div");
        var circleListDiv = document.createElement("div");
        imgListDiv.className = 'imgList';
        circleListDiv.className = 'circleList';
        imgList.forEach(function(item,i){
        if(i == 0){
            imgListDiv.innerHTML = imgListDiv.innerHTML + '<div class="imgItem active" style="background-image: url('+item+');"></div>';
            circleListDiv.innerHTML = circleListDiv.innerHTML +'<div id="c'+i+'" class="circleItem active"></div>'
            }else
            {
            imgListDiv.innerHTML = imgListDiv.innerHTML + '<div class="imgItem" style="background-image: url('+item+');"></div>';
            circleListDiv.innerHTML = circleListDiv.innerHTML +'<div id="c'+i+'" class="circleItem"></div>'
            }
        });
        swiperDiv.appendChild(imgListDiv);
        swiperDiv.appendChild(circleListDiv);
        swiperDiv.innerHTML += `<div class="btnList">
                <div class="btn pre"><</div>
                <div class="btn next">></div>
            </div>`;
    };
    createSwiperHtml(imgList);
    
        var imgListDivs = document.querySelectorAll(selector+" .imgItem");
        var btnNext = document.querySelector(selector+" .next");
        var btnPre = document.querySelector(selector+" .pre");
        var circleListDivs = document.querySelectorAll(selector+" .circleItem");
        var currentImg = 0;
            console.log(imgListDivs);
                function renderImg(){
                    imgListDivs.forEach(function(item,i){
                        item.classList.remove("active");
                    });
                    circleListDivs.forEach(function (item, i) {
                        item.classList.remove("active");
                    })
                    imgListDivs[currentImg].classList.add("active");
                    circleListDivs[currentImg].classList.add("active");
                }

                btnNext.onclick = function(){
                    currentImg = currentImg +1;
                    if(currentImg > imgListDivs.length - 1){
                        currentImg = 0;
                    }
                    renderImg();
                };

                btnPre.onclick = function () {
                        currentImg = currentImg - 1;
                        if (currentImg < 0) {
                            currentImg = imgListDivs.length - 1;
                        }
                        renderImg();
                    };
                circleListDivs.forEach(function(item,i){
                    item.onclick = function () {
                        var index = parseInt(item.id[1]);
                        currentImg = index;
                        renderImg();
                    };
                });

}